<template>
    <div>
        <div class="nowts">
            <p>当前余额</p>
            <span>￥{{userInfow.accountBalance}}元</span>
        </div>
        <!--充值金额-->
        <div class="boxs">
            <!-- <h5>请输入充值金额</h5> 
             onkeyup="this.value= this.value.match(/\d+(\.\d{0,1})?/) ? this.value.match(/\d+(\.\d{0,1})?/)[0] : ''" onblur='this.value=this.value.replace(/^[0]+[0-9]*$/gi,"")'-->
            <!-- <span class="dl">￥</span>
            <div class="ipt">
                <input type="text" placeholder="请输入提现的金额" maxlength="9" v-model="getArry.amount">
            </div> -->
            <p class="boxsp">
                选择充值金额
            </p>
            <div class="anbtn clearfix">
                <!-- <div class="list fl" @click="getArry.amount='100'" :class="{'active':getArry.amount=='100'}">
                    100
                    <span>元</span>
                </div>
                <div class="list fl" @click="getArry.amount='500'" :class="{'active':getArry.amount=='500'}">
                    500
                    <span>元</span>
                </div> -->
                <div class="list fl" @click="getArry.amount='1000'" :class="{'active':getArry.amount=='1000'}">1000
                    <span>元</span>
                </div>
                <div class="list fl" @click="getArry.amount='3000'" :class="{'active':getArry.amount=='3000'}">3000
                    <span>元</span>
                </div>
                <div class="list fl" @click="getArry.amount='5000'" :class="{'active':getArry.amount=='5000'}">5000
                    <span>元</span>
                </div>
                <!-- 测试充值 -->
                <!-- <div class="list fl" @click="getArry.amount='0.01'" :class="{'active':getArry.amount=='0.01'}">0.01
                    <span>元</span>
                </div> -->
                <!-- <div class="list fl" @click="getArry.amount='10000'" :class="{'active':getArry.amount=='10000'}">10000
                    <span>元</span>
                </div> -->
            </div>
        </div>
        <div class="heights">
            <span @click="getArry.pay_type='wx'">
                <button class="wechat"><input name="pay" type="radio" checked="getArry.pay_type='wx'"></button>
            </span>
            <span @click="getArry.pay_type='hxzf'">
                <button class="hxzf"><input name="pay" type="radio"></button>
            </span>
            <span @click="getArry.pay_type='zfb'">
                <button class="zfb"><input name="pay" type="radio"></button>
            </span>
            
        </div>

        <div class="btn" @click="gotoRecords(getArry.amount,userToken,getArry.pay_type)">确认</div>

        <form id="form" action="" method="post">
            <input id="pGateWayReq" name="pGateWayReq" type="hidden" />
        </form>

    </div>
</template>

<script>
import http from "@/assets/js/axios";
import { domain } from '@/assets/js/config'
import $ from 'jquery'
// import { maskTips } from '@/assets/js/dom'
import { maskTips, maskCallback } from '@/assets/js/dom'
export default {
    data() {
        return {
            userInfow: '',
            userToken: '',
            amounts: '100',
            getArry: {
                pay_type: 'wx',
                amount: '1000',
            },
            lists: '',
            valst: ''
        }
    },
    components: {

    },
    mounted() {
        var that = this
        let userToken = localStorage.getItem("token") || ''
        this.userToken = userToken
        this.getReason();
        maskCallback(function () {
            that.$router.push('/userinfo')
        }, 'comp-mask-btnAleft-gotoshiming', 'comp-mask-btnAright')
        // $('.height button').click(function () {
        //     $(this).addClass('active1').siblings().removeClass('active1');
        // })
        //弹框回调

        // console.log(this)
    },
    // watch: {
    //     'getArry.amount': function (newval, oldval) {
    //         // console.log(newval)
    //         let value = String(newval)
    //         // value.match(/\d+/g)
    //         // if(value.indexOf('.') > 0){
    //         //     var left = value.substr(0,value.indexOf('.'))
    //         //     var right = value.substr(value.indexOf('.'),value.length)
    //         //     if(right.length > 1){
    //         //         right = right.substr(1,1)
    //         //     }
    //         //     value = left + '.' + right
    //         // }
    //         if ((/\d+(\.\d{0,1})?/).test(value)) {
    //             value = value.match(/\d+(\.\d{0,1})?/)[0]//.push('')
    //         } else {
    //             value = ''
    //         }

    //         this.getArry.amount = value
    //     }
    // },
    methods: {
        direct: function (val) {
            this.$router.push({ path: '/' + val });
        },



        // 用户信息
        getReason: async function () {
            const res = await http.post('xshk/f/assets/query?token=' + this.userToken)
            if (res.data.code == -5) {
                maskTips({ id: "bal-fail", txt: res.data.message })
                this.$router.push('/login')
                return false;
            }
            if (res.data.code == 0) {
                this.userInfow = res.data.data
            }
        },


        // 充值
        gotoRecords: function (pid, token, type) {
            // console.log(this.getArry);
            // 是否实名

            let statu = localStorage.getItem("uthenticationStatus") || ''
            // if (statu == 2) {
            //     maskTips({ id: "payfail" + new Date().getTime(), title: '温馨提示', btnCls: 'comp-mask-btnAleft-gotoshiming', btnTxt: '确认', btnTxt2: '取消', txt: "请先去实名" })
            //     // this.$router.push('/userinfo')
            //     return false;
            // }

            // 充值
            // if (this.getArry.amount < 0.01) {
            //     maskTips({ id: "too-littlecash-1", txt: "提现金额不能小于0.1元" })
            // } else {
                if (type == 'wx') {
                    var userAgent = navigator.userAgent.toLowerCase();
                    if (/micromessenger/gi.test(userAgent)) {
                        window.open(domain + "/xshk/f/assets/goWxPay?token=" + this.userToken + "&amount=" + this.getArry.amount, '_parent')
                    } else {
                        $.ajax({
                            url: domain + "/xshk/f/assets/wxRecharge?token=" + this.userToken + "&amount=" + this.getArry.amount,
                            data: {'assetsType':1},
                            type: "get",
                            dataType: "json",
                            xhrFields: { withCredentials: true },
                            crossDomain: true,
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded',
                                // 'Referer':'http：//www.xukanghui.com'
                            },
                            // beforeSend: function (xhr) {   //beforeSend定义全局变量
                            //     xhr.setRequestHeader("Referer", "http://www.xukanghui.com");
                            // },
                            success: function (data) {
                                // console.log(data.data)
                                if (data) {
                                    window.open(data.data.mwebUrl, '_parent')
                                } else {
                                    console.log("数据为空");
                                }
                            },
                            error: function () {
                                console.log("失败");
                            }

                        })
                    }
                } else if (type == 'hxzf') {
                    if (statu == 2) {
                        maskTips({ id: "payfail" + new Date().getTime(), title: '温馨提示', btnCls: 'comp-mask-btnAleft-gotoshiming', btnTxt: '确认', btnTxt2: '取消', txt: "请先去实名" })
                        // this.$router.push('/userinfo')
                        return false;
                    }
                    $.ajax({
                        url: domain + "/xshk/f/assets/recharge?token=" + this.userToken + "&amount=" + this.getArry.amount + "&pay_type=" + this.getArry.pay_type,
                        data: {'assetsType':1},
                        type: "post",
                        dataType: "json",
                        xhrFields: { withCredentials: true },
                        crossDomain: true,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            // 'Referer':'http：//www.xukanghui.com'
                        },
                        // beforeSend: function (xhr) {   //beforeSend定义全局变量
                        //     xhr.setRequestHeader("Referer", "http://www.xukanghui.com");
                        // },
                        success: function (data) {
                            // console.log(data);
                            if (data.code == 0) {
                                $("#form").attr("action", data.data.ipsUrl);
                                $("#pGateWayReq").val(data.data.pGateWayReq);
                                document.getElementById("form").submit();
                            } else {
                                maskTips({ id: "too-littlecash-2", txt: data.message })
                            }
                        },
                        error: function () {
                            console.log("失败");
                        }

                    })
                } else if (type == 'zfb') {
                    this.$router.push({ path: '/rechargeMange', query: { 'amount': pid, 'userToken': token,'assetsType': 1 } })
                }
            //}
        }
    }
}
</script>

<style  scoped>
/*当前余额*/
.nowts {
    width: 88.5%;
    height: 3rem;
    text-align: center;
    color: #fff;
    position: relative;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: 0.4rem auto 0;
    background: #aad114;
    box-sizing: border-box;
    padding: 0.78rem 0;
}

.nowts p {
    font-size: 0.4rem;
    color: #ddffe8;
    /* font-family: "MicrosoftYaHei"; */
}
.nowts span {
    font-size: 0.6rem;
    font-weight: 900;
    /* font-family: "MicrosoftYaHei-Bold"; */
}

/*充值金额*/
.boxs {
    padding: 1rem 0.44rem .5rem .44rem;
    box-sizing: border-box;
}
.boxs .boxsp {
    color: #999;
    font-size: 16px;
    padding: 12px
}
.boxs h5 {
    margin-top: 0.4rem;
    font-size: 0.3rem;
    font-weight: 500;
    color: #3b3b3b;
    /* font-family: "PingFang-SC-Medium"; */
}
.boxs .ipt input {
    box-sizing: border-box;
    height: 1rem;
    float: left;
    border: none;
    outline: none;
    font-size: 0.45rem;
    line-height: 0.6rem;
    font-weight: 600;
    border-bottom: 1px solid #f5f5f5;
    margin: 0 auto 0.48rem;
    /* font-family: "PingFang-SC-Heavy"; */
}
.boxs .dl {
    display: inline-block;
    height: 1rem;
    z-index: 9;
    /* font-family: "PingFang-SC-Heavy"; */
    font-size: 0.6rem;
    line-height: 0.6rem;
    font-weight: 600;
    float: left;
    padding-top: 10px;
}
::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #999;
    font-size: 0.45rem;
    line-height: 0.6rem;
    text-align: left;
    font-weight: 600;
    /* font-family: "PingFang-SC-Heavy"; */
}
/*弹性盒父元素设置*/
.boxs .anbtn {
    /* width: 100%;
    height: 2.2rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; */
    /* justify-content: space-between; */
}
.boxs .anbtn div.list {
    width: 1.96rem;
    height: 0.96rem;
    line-height: 0.96rem;
    background: #fff;
    border: 1px solid #aad1a4;
    border-radius: 5px;
    color: #aad114;
    font-family: "PingFang-SC-Regular";
    font-size: 0.4rem;
    padding: 0 0.11rem 0 0;
    margin-left: 11px;
    margin-bottom: 10px;
    text-align: center;
}
.boxs .anbtn div span {
    font-size: 0.3rem;
}
.boxs .anbtn div.active {
    background: #aad114;
    color: #fff;
}

.heights {
    width: 100%;
    height: 1.98rem;
    padding: 0.4rem 0.4rem;
    box-sizing: border-box;
}
.heights button {
    position: relative;
}
.heights button input {
    width: 20px;
    height: 20px;
    position: absolute;
    top: -3px;
    left: -30px;
}
.heights .zfb {
    padding: 0;
    width: 1.2rem;
    height: 0.4rem;
    border: none;
    outline: none;
    background: url("../../assets/imgs/recharge/zfb.png") no-repeat;
    margin-left: 0.7rem;
    background-size: 100% 100%;
}
.heights span .wechat {
    padding: 0;
    width: 1.2rem;
    height: 0.4rem;
    border: none;
    outline: none;
    background: url("../../assets/imgs/recharge/wechat.png") no-repeat;
    margin-left: 0.7rem;
    background-size: 100% 100%;
}
.heights span .hxzf {
    padding: 0;
    width: 1.5rem;
    height: 0.4rem;
    border: none;
    outline: none;
    background: url("../../assets/imgs/recharge/hxzf.png") no-repeat;
    margin-left: .7rem;
    background-size: 100% 100%;
}

div.btn {
    float: left;
    width: 88.5%;
    height: 0.8rem;
    line-height: 0.8rem;
    border: none;
    font-size: 0.35rem;
    /* outline: none; */
    text-align: center;
    background: #aad114;
    border-radius: 5px;
    color: #fff;
    margin-left: 0.48rem;
    /* font-family: "PingFang-SC-Regular"; */
}
</style>